<template>
    <view>
        <!-- template对应的原始代码，为保证正常显示，已对其进行隐藏。 -->
        <block name="newsForm" v-if="false">
            <view class="form-box shadow">
                <view class="form-group">
                    <view class="title must">标题</view>
                </view>

                <view class="form-group">
                    <input placeholder="简短的标题" placeholder-class="phc" v-model="formTitle" :focus="formTitleFocus" maxlength="50" />
                </view>
                <view v-if="formTitleFocus" class="hint-desc error">{{ formTitleFocus }}</view>

                <view class="form-group arrow">
                    <view class="title must">分类</view>
                    <cmpt-picker id="cate-picker" :sourceData="cateIdOptions" @select="url" data-type="picker" data-item="formCateId" :item="formCateId"></cmpt-picker>
                </view>
                <view v-if="formCateIdFocus" class="hint-desc error">{{ formCateIdFocus }}</view>

                <view class="form-group">
                    <view class="title must">
                        排序号
                        <text class="text-grey text-normal margin-left-xs">(小的先显示)</text>
                    </view>
                    <input placeholder="排序号，小的先显示" type="digit" placeholder-class="phc" v-model="formOrder" :focus="formOrderFocus" maxlength="4" />
                </view>
                <view v-if="formOrderFocus" class="hint-desc error">{{ formOrderFocus }}</view>

                <view class="form-group">
                    <view class="action text-bold text-l">简介</view>
                    <view class="action">{{ formDesc.length }}/100</view>
                </view>

                <view class="form-group align-start">
                    <textarea
                        name="content"
                        placeholder-class="phc"
                        placeholder="请输入本文简介，若不填写则直接取内容前100个字作为简介"
                        style="min-height: 150rpx"
                        v-model="formDesc"
                        maxlength="100"
                        :focus="formDescFocus"
                        :auto-height="true"
                    ></textarea>
                </view>
                <view v-if="formDescFocus" class="hint-desc error">{{ formDescFocus }}</view>

                <view class="form-group">
                    <view class="title must">是否外部文章</view>
                    <switch v-if="formType == 1" @change="switchModel" data-item="formType" class="blue sm" :checked="true"></switch>
                    <switch v-if="formType != 1" @change="switchModel" data-item="formType" class="blue sm"></switch>
                </view>

                <block v-if="formType == 1">
                    <view class="form-group">
                        <view class="title">*外部文章链接</view>
                    </view>

                    <view class="form-group">
                        <input placeholder="请填写或者粘贴外部文章链接地址" placeholder-class="phc" v-model="formUrl" :focus="formUrlFocus" maxlength="300" />
                    </view>
                    <view v-if="formUrlFocus" class="hint-desc error">{{ formUrlFocus }}</view>

                    <view class="title-desc text-orange">
                        <text class="icon-info margin-right-xs"></text>
                        必须是您关联的公众号或者业务域名下的文章
                    </view>
                </block>
                <block v-else>
                    <view class="form-group arrow" @tap="url" data-url="../../content/admin_content">
                        <view class="title must">
                            详细内容
                            <text class="text-grey text-normal margin-left-xs">(必填)</text>
                        </view>
                        <view :class="'form-text ' + (contentDesc == '未填写' ? 'text-orange' : '')">{{ contentDesc }}</view>
                    </view>
                    <view v-if="formContentFocus" class="hint-desc error">{{ formContentFocus }}</view>
                </block>
            </view>

            <view class="form-box shadow">
                <!-- img upload begin -->
                <cmpt-img-upload :imgMax="1" title="*封面图上传 (必填)" :isCheck="false" :imgUploadSize="10" :imgList="imgList" @upload="bindImgUploadCmpt" />
                <!-- img upload end -->
            </view>

            <button @tap="bindFormSubmit" class="btn-admin margin-top-xs">提交</button>
        </block>
    </view>
</template>

<style>
@import './admin_news_form_tpl.css';
</style>
